<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Building Your First App - Phone (Part 1)
    </title>
    <link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="/static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="/static/css/appinventor.css" rel="stylesheet">
    <script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
    <script>
  var tracker = new gweb.analytics.AutoTrack({
        profile: 'UA-5856106-2'
      });
    </script>
    <style>
img.c4 {border-width:0}
    div.c3 {text-align: center;}
    img.c2 {padding-top: 10px; padding-right: 10px;}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="/about/"><img alt="" src="/static/images/appinventor_logo.gif"></a>
          </div>
          <form action="http://www.google.com/cse" id="cse-search-box">
            <input name="cx" type="hidden" value="011848991959401852367:xnrcbhk2zus"> <input name=
            "ie" type="hidden" value="UTF-8">
            <div class="header-search">
              <div class="header-search-query">
                <input class="textbox" name="q" type="text">
              </div>
              <div class="header-search-button">
                <input name="sa" src="/static/images/search-button.png" type="image">
              </div>
            </div>
          </form><script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"
         >
</script>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="/about/">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="/learn/">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="/forum/">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="http://appinventor.googlelabs.com/ode/Ya.html" target="_blank">My
              Projects</a>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="/learn/">Learn</a> &gt; <a href="/learn/setup/">Set Up</a> &gt; Building Your
            First App with the Phone (Part 1)
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Building your first app with an Android phone (Part 1): HelloPurr
              </h1><img align="right" alt="" class="c2" src=
              "/learn/tutorials/hellopurr/HelloPurrAssets/HelloPurrPart1PhoneImage.png" width=
              "128">
              <p>
                This page will get you started building your first app: A picture of a kitty that
                meows when you pet it. You can also <a href=
                "http://www.youtube.com/watch?v=nC_x9iOby0g">watch a video</a>
                (http://www.youtube.com/watch?v=nC_x9iOby0g) of this app being built. When you're
                done building Hello Purr, you'll be ready to design and build apps on your own.
                Before starting, make sure that you've <a href="/learn/setup/index.html">set up
                your computer</a>.
              </p>As you build HelloPurr, you'll learn how the three key tools of App Inventor
              work:
              <ul>
                <li>The <b>Designer</b>, the place were you design your app. It runs in your web
                browser.
                </li>
                <li>The <b>Blocks Editor</b>, the place were you set the behavior of the app. It is
                a separate application with its own window.
                </li>
                <li>The <b>phone</b>, connected to your computer via a USB cord.
                </li>
              </ul>
              <p>
                To build Hello Purr you'll need a picture of the kitty and also a meow sound.
                Download these files to your computer:
              </p>
              <ul>
                <li>
                  <a href="../../tutorials/hellopurr/HelloPurrAssets/kitty.png">kitty picture</a>
                </li>
                <li>
                  <a href="../../tutorials/hellopurr/HelloPurrAssets/meow.mp3">meow sound</a>
                </li>
              </ul>
              <h2>
                Start the Designer and create a new project
              </h2>
              <p>
                In your web browser, go to the App Inventor website at <a href=
                "http://appinventor.googlelabs.com">http://appinventor.googlelabs.com</a>. If this
                is the first time you've used App Inventor, you'll see the <em>Projects</em> page,
                with no projects in it yet. It should look like this:
              </p>
              <div class="c3">
                <img alt="" height="408" src=
                "/learn/tutorials/hellopurr/HelloPurrAssets/projects.png" width="620">
              </div>
              <h4>
                Create a new project
              </h4>
              <ol>
                <li>Click <span class="ButtonText">New</span> on the left side, near the top of the
                page.
                </li>
                <li>Enter the project name HelloPurr (one word, with no spaces) in the dialog box
                that appears, click OK.
                </li>
              </ol>
              <p>
                The browser will open the <em>Designer</em>, the place where you select
                <em>components</em> for your app, and should look like this:
              </p>
              <div class="c3">
                <img alt="" height="408" src=
                "/learn/tutorials/hellopurr/HelloPurrAssets/designer.png" width="620">
              </div>
              <h2>
                Select components to design your app
              </h2>
              <p>
                App Inventor components are located on the left hand side of the Designer screen
                under the title <b>Palette</b>. Components are the basic elements you use to make
                apps on the Android phone. They're like the ingredients in a recipe. Some
                components are very simple, like a <em>Label</em> component, which just shows text
                on the screen, or a <em>Button</em> component that you tap to initiate an action.
                Other components are more elaborate: a drawing <em>Canvas</em> that can hold still
                images or animations, an <em>accelerometer (motion) sensor</em> that works like a
                Wii controller and detects when you move or shake the phone, components that make
                or send text messages, components that play music and video, components that get
                information from Web sites, and so on.
              </p>
              <p>
                To use a component in your app, you need to click and drag it onto the viewer in
                the middle of the Designer. When you add a component to the viewer, it will also
                appear in the components list on the right hand side of the viewer.
              </p>
              <p>
                Components have properties that can be adjusted to change the way the component
                appears within the app. To view and change the properties of a component, you must
                first select the desired component in your list of components.
              </p>
              <h4>
                Steps for selecting components and setting properties
              </h4>
              <p>
                We want HelloPurr to have a <b>Button</b> component that has the Image property set
                to the kitty.png file you downloaded earlier. To set this:
              </p>
              <ol>
                <li>Drag and drop the <span class="ButtonText">Button</span> component to
                <b>Screen1</b>. The <span class="ButtonText">Button</span> component is located in
                the Basic section of the <b>Palette</b>.
                </li>
                <li>In the list of properties, under Image, click on <b>none...</b>
                </li>
                <li>Click <span class="ButtonText">Add…</span>.
                </li>
                <li>Select the the kitty.png file you downloaded earlier.
                </li>
                <li>Delete <i>Text for Button1</i> listed under the <b>Text</b> property using the
                Backspace key.
                </li>
              </ol>Your Designer should look like this:
              <div class="c3">
                <img alt="" height="408" src=
                "/learn/tutorials/hellopurr/HelloPurrAssets/designerwithkittybutton.png" width=
                "620">
              </div>
              <h2>
                Open the Blocks Editor and connect your phone
              </h2>
              <p>
                The Designer is one of three key tools you'll use in creating your apps. The second
                is the <em>Blocks Editor</em>. The third is the phone. You'll use the Blocks Editor
                to assign behaviors to your components, such as what should happen when the user of
                your app taps a button.
              </p>The Blocks Editor runs in a separate window. When you click <span class=
              "ButtonText">Open the blocks editor</span> from the Designer window, the Blocks
              Editor program file should download and run. This process may take 30 seconds or
              longer. If the Blocks Editor never opens, it might be because your browser is not set
              up to run downloaded Java applications automatically. In this case, find the
              downloaded file named AppInventorForAndroidCodeblocks.jnlp and open it. The Blocks
              Editor window should look as shown below, with "drawers" for the program blocks to
              the left, and a large empty "canvas" space for placing blocks to assemble the
              program, which you'll do below.
              <div class="c3">
                <img alt="" height="360" src=
                "/learn/tutorials/hellopurr/HelloPurrAssets/blockseditorhellopurr.png" width="620">
              </div>
              <p>
                Before continuing to build the app, you'll need to connect your phone. Make sure
                you've already <a href="/learn/setup/phone.html">set up your phone</a>. Now connect
                your phone to the computer with a USB cable, and click the <span class=
                "ButtonText">Connect to device...</span> button at the top of the Blocks Editor
                window. You'll see a drowdown list with your phone listed, identified by its model
                type (e.g., HT99TP800054). Click on that. You'll see a yellow animated arrow move
                back and forth, showing that App Inventor is connecting to the phone. Creating this
                connection can take another minute or two. When it's all done, the arrow will stop
                moving and turn green, and if you look at the phone screen, you'll see the kitty
                there — this is the beginning of your app!
              </p>
              <h2>
                Next Steps
              </h2>
              <p>
                Now that the Designer, the Blocks Editor, and the phone are all connected, you can
                <a href="hellopurrpart2.html">Complete the HelloPurr app</a>
              </p>
              <blockquote class="notice">
                Something not working right? Visit the <a href=
                "/learn/troubleshooting.html">troubleshooting page</a>, or check the <a href=
                "http://appinventor.googlelabs.com/forum">App Inventor User Forum</a> for help.
              </blockquote>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt=
              "Creative Commons License" class="c4" src=
              "http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/"
              rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              ©2011 Google<br>
              <a href="/about/index.html">About</a> | <a href="/about/privacy.html">Privacy</a> |
              <a href="/about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script>
  if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>